<!--版面搜索-->
<script setup>

import {ElementUtils} from "@/assets/js/ElementUtils";
import {getForumRoute} from "@/assets/js/routerUtils";
import {setupMapGetters} from "@/assets/js/vuexUtils";
import ForumAvatar from "@/components/forum/ForumAvatar.vue";
import {ForumApi} from "@ginstone/nga-api/dist/src/method/ForumApi";
import {SearchForumParam} from "@ginstone/nga-api/dist/src/params/ForumParams";
import {ref} from "vue";

const getClient = setupMapGetters("Account", ["getClient"]).getClient.value
// 搜索关键字
const keyword = ref();
// 搜索结果
const result = ref();

const search = (keyword) => {
  if (!keyword) {
    return
  }
  const loading = ElementUtils.loading({target: "#search-forum",});

  ForumApi.search(getClient(), new SearchForumParam(keyword)).then(res => {
    result.value = res;
    console.log(res)
    loading.close()
  })
}
</script>

<template>
  <div id="search-forum" style="min-height: 200px">
    <div>
      <el-input v-model="keyword" placeholder="请输入关键字,回车或点击输入框以外位置确定" @change="search"/>
    </div>
    <br>
    <el-scrollbar v-if="result" always max-height="600">
      <el-table :data="result">
        <el-table-column width="70">
          <template #default="{row}">
            <forum-avatar :url="row.iconBig"/>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template #default="{row}">
            <router-link :to="getForumRoute(row.colTid,row.forumId,row.colTid)">
              <el-link>
                {{ row.name }}
              </el-link>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column width="70">
          <template #default="{row}">
            <forum-avatar :url="row.parent.iconBig"/>
          </template>
        </el-table-column>
        <el-table-column label="上级版面">
          <template #default="{row}">
            <router-link v-if="row.parent" :to="getForumRoute(false,row.parent.forumId,undefined)">
              <el-link>
                {{ row.parent.name }}
              </el-link>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>

<style scoped>

</style>